import React, { Component, PropTypes } from 'react';
import Echarts from 'echarts';
import Moment from 'moment';
import { connect } from 'dva'
import {
  Input,
  Button,
  Select,
  Form,
  Modal,
  Row,
  Col,
  Icon,
  message,
} from 'antd';
import Style from './home.less';
import NumberPlay from '../../util/numberPlay';
import $ from 'jquery';
import Service from "../../service";
const FormItem = Form.Item;
const createForm = Form.create;
const Option = Select.Option;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      page: 1,
      pageSize: 15,
      loading: 'none'
    };
  }
  componentDidMount() {
    let self = this;
    const mobile_token = localStorage.getItem('token');
    self.props.queryList({
      params: {
        token: mobile_token
      },
      func: function (data) {
        self.todayRunningStaticsFun(data.running_day_seq)
        console.log(data)
        self.todayRunningHourStaticsFilter(data.violation_rate_day_seq)
        self.violationMonthFilter(data.violation_address_top_pre_month);
        self.violationTypeMonthFun(data.violation_type_address_top_pre_month)
      }
    })


  }
  componentWillUnmount() {
    if (this.state.timer != null) {
      clearInterval(this.state.timer);

    }
  }
  // 当日在途量时序，暂定24小时（折线）
  todayRunningStaticsFun = (Data) => {
    // console.log(labelData)
    // 基于准备好的dom，初始化echarts实例
    let staticsRegionWrap = document.getElementById('todayRunningWrap');
    if (!staticsRegionWrap) {
      return false
    }
    // console.log(echarts)
    let staticsRegionChart = echarts.init(staticsRegionWrap);
    // 绘制图表
    staticsRegionChart.setOption({
      title: {
        subtext: '',
      },
      grid: {
        x: 30,
        y: 15,
        x2: 40,
        y2: 35,
      },
      xAxis: {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24'],

      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: Data,
        type: 'line',
        itemStyle: {
          normal: {
            color: "#64BBFC",//折线点的颜色
            lineStyle: {
              color: "#64BBFC",//折线的颜色
              width: 1// 0.1的线条是非常细的了
            },

          }
        }
      }]
    });
  }

  todayRunningHourStaticsFilter = (data) => {
    let self = this;
    // console.log(data)
    let keyArr = [];
    let vArr = [];
    for (let k in data) {
      keyArr.push(k)
      vArr.push(data[k])
    }
    self.todayRunningHourStaticsFun(vArr, keyArr)
  }

  // 当日在途量时序，1小时（折线）
  todayRunningHourStaticsFun = (Data, kData) => {
    // console.log(labelData)
    console.log(Data.length)
    // 基于准备好的dom，初始化echarts实例
    let staticsRegionWrap = document.getElementById('todayRunningHourWrap');
    if (!staticsRegionWrap) {
      return false
    }
    // console.log(echarts)
    let staticsRegionChart = echarts.init(staticsRegionWrap);
    // 绘制图表
    staticsRegionChart.setOption({
      title: {
        subtext: '',
      },
      grid: {
        x: 30,
        y: 15,
        x2: 40,
        y2: 35,
      },
      xAxis: {
        type: 'category',
        data: kData,

      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: Data,
        type: 'line',
        itemStyle: {
          normal: {
            color: "#64BBFC",//折线点的颜色
            lineStyle: {
              color: "#64BBFC",//折线的颜色
              width: 1// 0.1的线条是非常细的了
            },

          }
        }
      }]
    });
  }
  // 上个月违章路段排行（排名） 数据处理
  violationMonthFilter = (data) => {
    let self = this;
    let bData = [], vData = [];
    for (let i = 0; i < data.length; i++) {
      if (data[i]) {
        let str = data[i].split(',');
        bData.push(str[0]);
        vData.push(str[1])
      }
    }
    self.violationMonthFun(bData, vData);
  }
  // 上个月违章路段排行（排名）
  violationMonthFun = (bData, vData) => {
    // console.log(labelData)
    // 基于准备好的dom，初始化echarts实例
    let staticsRegionWrap = document.getElementById('violationMonthWrap');
    if (!staticsRegionWrap) {
      return false
    }
    let staticsRegionChart = echarts.init(staticsRegionWrap);
    // 绘制图表
    staticsRegionChart.setOption({
      title: {
        subtext: '100(百分比)',
        "x": "50px"
      },
      grid: {
        x: 80,
        y: 35,
        x2: 80,
        y2: 25,
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLine: {
          lineStyle: {
            color: '#3e3e3e',
            width: 1
          }
        },
        itemStyle: {
          //通常情况下：
          normal: {
            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            color: function (params) {
              var colorList = ['#0090ff', '#52d6ff', '#f5a623', '#be0008'];
              return colorList[params.dataIndex];
            },
          },
          //鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          // splitArea: { show: true },//保留网格区域
          lineStyle: {
            color: '#999999',
            width: 1
          }
        }
      },
      series: [{
        data: vData,
        type: 'bar',
        //设置柱子的宽度
        barWidth: 15,
        //配置样式
        itemStyle: {
          //通常情况下：
          normal: {
            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            color: function (params) {
              var colorList = ['#0090ff', '#52d6ff', '#f5a623', '#be0008'];
              return colorList[params.dataIndex];
            },
          },
          //鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      }]
    });
  }

  // 上个月各违章类型违章路段排行（排名）
  violationTypeMonthFilter = (data) => {
    let self = this;
    let bData = [], vData = [];
    for (let i = 0; i < data.length; i++) {
      if (data[i]) {
        let str = data[i].split(',');
        bData.push(str[0]);
        vData.push(str[1])
      }
    }
    self.violationTypeMonthFun(bData, vData);
  }
  // 上个月各违章类型违章路段排行（排名）
  violationTypeMonthFun = (vData) => {
    // console.log(labelData)
    // 基于准备好的dom，初始化echarts实例
    let staticsRegionWrap = document.getElementById('violationTypeMonthWrap');
    if (!staticsRegionWrap) {
      return false
    }
    let staticsRegionChart = echarts.init(staticsRegionWrap);
    // 绘制图表
    staticsRegionChart.setOption({
      title: {
        subtext: '100(百分比)',
        "x": "50px"
      },
      grid: {
        x: 80,
        y: 35,
        x2: 80,
        y2: 25,
      },
      legend: {
        data: ['上个月逆行违章路段排行', '上个月超速违章路段排行', '上个月不按规定道路违章路段排行', '上个月闯红灯违章路段排行'],
        itemGap: 5
      },
      xAxis: {
        type: 'category',
        data: [],
        axisLine: {
          lineStyle: {
            color: '#3e3e3e',
            width: 1
          }
        },
        itemStyle: {
          //通常情况下：
          normal: {
            //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
            color: function (params) {
              var colorList = ['#0090ff', '#52d6ff', '#f5a623', '#be0008'];
              return colorList[params.dataIndex];
            },
          },
          //鼠标悬停时：
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
      },
      yAxis: {
        type: 'value',
        axisLine: {
          // splitArea: { show: true },//保留网格区域
          lineStyle: {
            color: '#999999',
            width: 1
          }
        }
      },
      series: [
        {
          name: '上个月逆行违章路段排行',
          type: 'bar',
          data: vData.retrograde
        },
        // {
        //   data: vData,
        //   type: 'bar',
        //   //设置柱子的宽度
        //   barWidth: 15,
        //   //配置样式
        //   itemStyle: {
        //     //通常情况下：
        //     normal: {
        //       //每个柱子的颜色即为colorList数组里的每一项，如果柱子数目多于colorList的长度，则柱子颜色循环使用该数组
        //       color: function (params) {
        //         var colorList = ['#0090ff', '#52d6ff', '#f5a623', '#be0008'];
        //         return colorList[params.dataIndex];
        //       },
        //     },
        //     //鼠标悬停时：
        //     emphasis: {
        //       shadowBlur: 10,
        //       shadowOffsetX: 0,
        //       shadowColor: 'rgba(0, 0, 0, 0.5)'
        //     }
        //   },
        // }
      ]
    });
  }


  mindexurlFun = () => {
    this.context.router.push(`/1/app/mindex`);
  }
  mapurlFun = () => {
    this.context.router.push(`/1/app/mmap`);
  }
  returnFun = () => {
    this.context.router.push(`/1/app/mmy`);
  }

  render() {
    const { getFieldDecorator } = this.props.form;
    const { msglist } = this.props;
    let decoratedata = msglist || [];

    // console.log(msglist);
    return (
      <div className={Style.wrap} style={{ minHeight: '500px' }}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            数据分析
          </div>
        </div>

        <div className={Style.StiticWrap}>
          <div className={Style.totalWrap}>
            <h3>当日在途量时序 24小时</h3>
            <div className={Style.totalCon} id='todayRunningWrap'>

            </div>
          </div>
          <div className={Style.totalWrap}>
            <h3>当日违章率时序，1小时</h3>
            <div className={Style.totalCon} id='todayRunningHourWrap'>

            </div>
          </div>
          <div className={Style.totalWrap}>
            <h3>上个月违章路段排行（排名）</h3>
            <div className={Style.totalCon} id='violationMonthWrap'>

            </div>
          </div>
          <div className={Style.totalWrap}>
            <h3>上个月违章路段排行（排名）</h3>
            <div className={Style.totalCon} id='violationTypeMonthWrap'>

            </div>
          </div>
        </div>


      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  // console.log(state)
  return {
    msgmore: state.mmodel.msgmore,
    loading: !!state.loading.global
  }
}

function dispatchToProps(dispatch) {
  return {
    queryList(payload, params) {
      dispatch({ type: 'mmodel/dataIndex', payload })
    }

  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
